<!-- directive:title 细节样式 -->
<!-- directive:breadcrumb 细节样式 -->
<div class="panel-body">
    <div class="row">
        <div class="col-lg-6">
            <div>
                <h4>Breadcrumb</h4>
                <ul class="breadcrumb bg-white b-a">
                    <li><a href><i class="fa fa-home"></i> Breadcrumb</a></li>
                    <li><a href>Elements</a></li>
                    <li class="active">Components</li>
                </ul>
                <script type="text/xianjs" ui-bs>
                    <ul class="breadcrumb bg-white b-a">
                        <li><a href><i class="fa fa-home"></i> Breadcrumb</a></li>
                        <li><a href>Elements</a></li>
                        <li class="active">Components</li>
                    </ul>
                </script>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading"> <span class="label bg-danger pull-right m-t-xs">4 left</span> Tasks </div>
                <table class="table table-striped m-b-none">
                    <thead> <tr> <th>Progress</th> <th>Item</th> </tr> </thead>
                    <tbody>
                        <tr>
                            <td> <div class="progress progress-sm progress-striped active m-t-xs m-b-none"> <div class="progress-bar bg-success" data-toggle="tooltip" data-original-title="80%" style="width: 80%"></div> </div> </td>
                            <td>App prototype design</td>
                        </tr>
                        <tr>
                            <td> <div class="progress progress-xs m-t-xs m-b-none"> <div class="progress-bar bg-info" data-toggle="tooltip" data-original-title="40%" style="width: 40%"></div> </div> </td>
                            <td>Design documents</td>
                        </tr>
                        <tr>
                            <td> <div class="progress progress-xs m-t-xs m-b-none"> <div class="progress-bar bg-warning" data-toggle="tooltip" data-original-title="20%" style="width: 20%"></div> </div> </td>
                            <td>UI toolkit</td>
                        </tr>
                        <tr>
                            <td> <div class="progress progress-xs m-t-xs m-b-none"> <div class="progress-bar bg-danger" data-toggle="tooltip" data-original-title="15%" style="width: 15%"></div> </div> </td>
                            <td>Testing</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="m-b-lg">
                <h4>Lable &amp; Badge</h4>
                <p>
                    <span class="label bg-primary">Primary</span>
                    <span class="label bg-success">Success</span>
                    <span class="label bg-info">Info</span>
                    <span class="label bg-dark">dark</span>
                    <span class="label bg-warning">Warning</span>
                    <span class="label bg-danger">Danger</span>
                    <span class="label bg-light dk">Light</span>
                </p>
                <p class="m-b-none">
                    <span class="badge bg-primary">15</span>
                    <span class="badge bg-success">20</span>
                    <span class="badge bg-info">21</span>
                    <span class="badge bg-dark">13</span>
                    <span class="badge bg-warning">35</span>
                    <span class="badge bg-danger">32</span>
                    <span class="badge">9</span>
                </p>
                <script type="text/xianjs" ui-bs>
                    <span class="badge bg-primary">15</span>
                    <span class="badge bg-success">20</span>
                    <span class="badge bg-info">21</span>
                    <span class="badge bg-dark">13</span>
                    <span class="badge bg-warning">35</span>
                    <span class="badge bg-danger">32</span>
                    <span class="badge">9</span>
                </script>
            </div>
            <div class="m-b m-t-lg">
                <h4>头像 & 点</h4>
                <a href class="avatar thumb-xs m-r-xs"> <img src="../../images/head.zhishui.jpg" alt="..."> <i class="on b-white"></i> </a>
                <a href class="avatar thumb-xs m-r-xs"> <img src="../../images/head.zhishui.jpg" alt="..."> <i class="busy b-white"></i> </a>
                <a href class="avatar thumb-xs m-r-xs"> <img src="../../images/head.zhishui.jpg" alt="..."> <i class="away b-white"></i> </a>
                <a href class="avatar thumb-xs m-r-xs"> <img src="../../images/head.zhishui.jpg" alt="..."> <i class="on b-white"></i> </a>
                <a href class="btn btn-success btn-rounded font-bold"> +152 </a>
                <script type="text/xianjs" ui-bs>
                    <a href class="avatar thumb-xs m-r-xs"> <img src="../../images/head.zhishui.jpg" alt="..."> <i class="on b-white"></i> </a>
                    <a href class="btn btn-success btn-rounded font-bold"> +152 </a>
                </script>
            </div>
        </div>
    </div>
</div>

